<script setup lang="ts"></script>

<template>
  <div class="layout">
    <h2>下拉选择</h2>
    <lay-select v-model="value" placeholder="请选择">
      <lay-select-option :value="1" label="学习"></lay-select-option>
      <lay-select-option :value="2" label="编码"></lay-select-option>
      <lay-select-option :value="3" label="运动"></lay-select-option>
    </lay-select>

    <h2>下拉菜单</h2>
    <lay-dropdown>
      <lay-button type="primary">下拉菜单</lay-button>
      <template #content>
        <lay-dropdown-menu>
          <lay-dropdown-menu-item>选项一</lay-dropdown-menu-item>
          <lay-dropdown-menu-item>选项二</lay-dropdown-menu-item>
          <lay-dropdown-menu-item>选项三</lay-dropdown-menu-item>
        </lay-dropdown-menu>
      </template>
    </lay-dropdown>

    <h2>弹框确认</h2>
    <lay-popconfirm
      content="确认删除部门数据"
      trigger="click"
      btnAlign="center"
    >
      <lay-button size="md" type="danger"> 删除 </lay-button>
    </lay-popconfirm>

    <h2>等等与定位有关</h2>
  </div>
</template>

<style scoped lang="less">
.layout {
  padding-left: 100px;

  h2 {
    margin-top: 20px;
  }
}
</style>
